<div class="pure-view-container">
  <div class="x-view-title">${t('ui.account.user.title.userManagement')}</div>
  <link href="${appCss('static/app/account/user-management.css')}" rel="stylesheet" />
  <div class="x-search-bar">
    <form>
      <div class="form-row align-items-center">
        <div class="col-auto"><label class="sr-only" for="userName"></label>
          <div class="input-group mb-2">
            <div class="input-group-prepend">
              <div class="input-group-text">${t('ui.account.user.field.userName')}</div>
            </div><input type="text" class="form-control" id="userName" data-x-name="searchField.userName"
              data-x-type="autoTrimText" />
          </div>
        </div>
        <div class="col-auto"><button type="button" class="btn btn-primary mb-2"
            data-x-ui="searchBtn">${t('ui.system.common.btn.search')}</button></div>
      </div>
    </form>
  </div>
  <div class="x-tool-bar"></div>
  <table data-x-ui="userTable" class="x-table-custom">
    <thead>
      <tr>
        <th data-field="id" data-visible="false">ID</th>
        <th data-field="userName">${t('ui.account.user.field.userName')}</th>
        <th data-field="password">${t('ui.account.user.field.password')}</th>
        <th>${t('ui.system.common.field.operate')}</th>
      </tr>
    </thead>
  </table>
  <div data-x-ui="assignRoleDialog" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">${t('ui.account.user.dialog.assignRole')}</h5><button type="button"
            class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        </div>
        <div class="modal-body">
          <form>
            <nav>
              <div class="nav nav-tabs" role="tablist"><button data-x-ui="assignedRoleNavTab" class="nav-link active"
                  type="button" role="tab"
                  data-toggle="tab">${t('ui.account.assignRoleDialog.tab.assignedRole')}</button><button
                  data-x-ui="assignableRoleNavTab" class="nav-link" type="button" role="tab" data-toggle="tab"
                  disabled="">${t('ui.account.assignRoleDialog.tab.assignableRole')}</button></div>
            </nav>
            <div class="tab-content">
              <div data-x-ui="assignedRoleTabPane" class="tab-pane fade show active" role="tabpanel">
                <table data-x-ui="assignedRoleTable" class="x-table-custom" data-x-name="assignedRoles"
                  data-x-type="dataGrid">
                  <thead>
                    <tr>
                      <th data-field="id" data-visible="false">ID</th>
                      <th data-field="roleCode">${t('ui.security.role.field.roleCode')}</th>
                      <th data-field="roleName">${t('ui.security.role.field.roleName')}</th>
                      <th data-field="effectiveFlagDesc">${t('ui.system.common.field.effectiveFlag')}</th>
                      <th data-field="remark">${t('ui.system.common.field.remark')}</th>
                      <th>${t('ui.system.common.field.operate')}</th>
                    </tr>
                  </thead>
                </table>
              </div>
              <div data-x-ui="assignableRoleTabPane" class="tab-pane fade" role="tabpanel">
                <div class="x-search-bar">
                  <form>
                    <div class="form-row align-items-center">
                      <div class="col-auto"><label class="sr-only" for="roleCode"></label>
                        <div class="input-group mb-2">
                          <div class="input-group-prepend">
                            <div class="input-group-text">${t('ui.security.role.field.roleCode')}</div>
                          </div><input type="text" class="form-control" id="roleCode"
                            data-x-name="searchRoleField.roleCode" />
                        </div>
                      </div>
                      <div class="col-auto"><label class="sr-only" for="roleName"></label>
                        <div class="input-group mb-2">
                          <div class="input-group-prepend">
                            <div class="input-group-text">${t('ui.security.role.field.roleName')}</div>
                          </div><input type="text" class="form-control" id="roleName"
                            data-x-name="searchRoleField.roleName" />
                        </div>
                      </div>
                      <div class="col-auto"><button type="button" class="btn btn-primary mb-2"
                          data-x-ui="searchRoleBtn">${t('ui.system.common.btn.search')}</button></div>
                    </div>
                  </form>
                </div>
                <table data-x-ui="assignableRoleTable" class="x-table-custom">
                  <thead>
                    <tr>
                      <th data-checkbox="true"></th>
                      <th data-field="id" data-visible="false">ID</th>
                      <th data-field="roleCode">${t('ui.security.role.field.roleCode')}</th>
                      <th data-field="roleName">${t('ui.security.role.field.roleName')}</th>
                      <th data-field="effectiveFlagDesc">${t('ui.system.common.field.effectiveFlag')}</th>
                      <th data-field="remark">${t('ui.system.common.field.remark')}</th>
                      <th>${t('ui.system.common.field.operate')}</th>
                    </tr>
                  </thead>
                </table>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary x-btn-cancel"
            data-dismiss="modal">${t('ui.system.common.btn.cancel')}</button><button type="button"
            class="btn btn-primary x-btn-confirm">${t('ui.system.common.btn.save')}</button></div>
      </div>
    </div>
  </div>
  <script src="${appJs('app/common/js/table-selection-tabs.js')}" type="text/javascript"></script>
  <script src="${appJs('app/account/user-management/user-management.js')}" type="text/javascript"></script>
  <script src="${appJs('app/account/user-management/assign-role-dialog.js')}" type="text/javascript"></script>
</div>